<template>
  <div class="table-box serviceFee">
    <ProTable ref="proTable" title="服务费列表" row-key="id" :columns="columns" :request-api="getFoodDeskFeeList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openRuleDrawer('新增', ruleDrawerData)">
          新增服务费
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #status="scope">
        <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? "使用中" : "未使用" }}</el-tag>
      </template>
      <template #deskCount="scope">
        <el-text>{{ scope.row.deskCount }}个桌台</el-text>
        <el-text class="ml10 pointer" type="primary" @click="openZTaiDialog(scope.row)">查看</el-text>
      </template>
      <template #operation="scope">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item>
            <el-button type="primary" link @click="openRuleDrawer('查看', scope.row)"> 查看 </el-button>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="scope.row.status">
            <el-button type="primary" link @click="changeRowStatus(scope.row)"> 停用 </el-button>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-else>
            <el-dropdown>
              <el-button link type="primary">
                更多 <el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button type="primary" link @click="openRuleDrawer('编辑', scope.row)"> 编辑 </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="primary" link @click="deleteAccount(scope.row)"> 删除 </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="primary" link @click="changeRowStatus(scope.row)"> 启用 </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </ProTable>
    <ZTaiDialog ref="zTaiDialogRef" />
    <div class="rule-drawer">
      <RuleDrawer ref="ruleDrawerRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="serviceFee">
import { ref } from "vue";
import { Restaurant } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import ZTaiDialog from "@/views/restaurant/components/ZTaiDialog.vue";
import RuleDrawer from "@/views/restaurant/components/RuleDrawer.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import {
  getFoodDeskFeeList,
  createFoodDeskFee,
  deleteFoodDeskFee,
  editFoodDeskFee,
  changeStatusFoodDeskFee
} from "@/api/modules/restaurant";
import { formatDate } from "@/utils/date-formatter";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps<Restaurant.ResFoodDeskFeeList>[] = [
  { type: "index", label: "序号", width: 60 },
  { prop: "name", sortable: true, label: "名称", align: "left", minWidth: 120 },
  { prop: "rule", sortable: true, label: "规则", align: "left", minWidth: 120 },
  { prop: "deskCount", sortable: true, label: "桌台", align: "left", minWidth: 120 },
  { prop: "status", sortable: true, label: "状态", minWidth: 60 },
  { prop: "operation", label: "操作", width: 140, align: "left", fixed: "right" }
];

// 删除
const deleteAccount = async (params: Restaurant.ResFoodDeskFeeList) => {
  await useHandleData(deleteFoodDeskFee, { id: params.id }, `删除【${params.name}】服务费`);
  proTable.value?.getTableList();
};

const changeRowStatus = async (params: Restaurant.ResFoodDeskFeeList) => {
  await useHandleData(changeStatusFoodDeskFee, { id: params.id }, `${params.status ? "停用" : "启用"}【${params.name}】服务费`);
  proTable.value?.getTableList();
};

const zTaiDialogRef = ref<InstanceType<typeof ZTaiDialog> | null>(null);
const openZTaiDialog = (row: Partial<Restaurant.ResFoodDeskFeeList> = {}) => {
  const params = {
    row: { ...row },
    isView: false
  };
  zTaiDialogRef.value?.acceptParams(params);
};

const ruleDrawerData = ref({
  feeType: 1,
  unit: 1,
  status: 1,
  posChange: 0,
  validityType: 0,
  validityRange: [formatDate(0, "start", "yyyy-MM-dd"), formatDate(60, "start", "yyyy-MM-dd")],
  foodSpecList: [],
  validityTime: [["00:00", "23:59"]],
  deskList: [],
  validityDay: [1, 2, 3, 4, 6, 5, 7]
});
const ruleDrawerRef = ref<InstanceType<typeof RuleDrawer> | null>(null);
const openRuleDrawer = (title: string, row: Partial<Restaurant.ResFoodDeskFeeList> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === "查看",
    api: title === "新增" ? createFoodDeskFee : title === "编辑" ? editFoodDeskFee : undefined,
    getTableList: proTable.value?.getTableList
  };
  ruleDrawerRef.value?.acceptParams(params);
};
</script>
<style lang="scss" scoped>
.serviceFee {
  position: relative;
  overflow: hidden;
  .rule-drawer {
    :deep .el-overlay {
      position: absolute;
    }
  }
}
</style>
